<template>
	<div>
		<div class="addHobby">
			<div
				class="item_box"
				v-for="(item, index) in centerStore.avocation"
				:key="item.id"
			>
				{{ item.name }}
				<!-- 图标 -->
				<div class="item_icon" @click="delAvo(index)">
					<svg
						t="1666198222051"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="7062"
						width="20"
						height="20"
					>
						<path
							d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
							p-id="7063"
							fill="#b2b5c0"
						></path>
					</svg>
				</div>
			</div>
		</div>
		<div>
			<p>推荐兴趣技能</p>
			<div class="hobby_item">
				<!-- 下方v-infinite-scroll="" -->
				<el-scrollbar
					height="350px"
					infinite-scroll-delay="600"
					v-infinite-scroll="handlerScroll"
				>
					<!-- 每一项 -->
					<div
						class="item_box"
						:key="index"
						v-for="(item, index) in centerStore.avocations.content"
						@click="addAvo(item)"
					>
						{{ item.name }}
						<!-- 图标 -->
						<div class="item_icon" v-show="iconShow(item.id)">
							<svg
								t="1666191530434"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="2315"
								width="25"
								height="25"
							>
								<path
									d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM748.8 384l-294.4 294.4c-6.4 6.4-19.2 12.8-32 12.8 0 0 0 0 0 0 0 0-6.4 0-6.4 0-12.8 0-19.2-6.4-32-12.8L262.4 582.4C243.2 563.2 243.2 531.2 256 512c19.2-19.2 44.8-25.6 70.4-6.4l89.6 76.8L678.4 320c19.2-19.2 51.2-19.2 70.4 0C768 332.8 768 364.8 748.8 384z"
									p-id="2316"
									fill="#e54983"
								></path>
							</svg>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<div class="dialog-footer">
			<button class="cancel" @click="emit('dialogShow')">取 消</button>
			<button class="confirm" @click="emit('dialogShow')">确 认</button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserInfoStore } from '../../store/userInfo'
const centerStore = useUserInfoStore()
let emit = defineEmits(['dialogShow'])
let avocation = centerStore.avocation

// 添加爱好
let addAvo = (item) => {
	let flag = centerStore.avocation.findIndex((i) => i.id === item.id)
	if (flag === -1) {
		if (centerStore.avocation.length < 7) {
			centerStore.avocation.push(item)
		}
	} else {
		centerStore.avocation.splice(flag, 1)
	}
}
// 删除某一个爱好
let delAvo = (index) => {
	centerStore.avocation.splice(index, 1)
}
// 下方icon是否显示
let iconShow = (id) => {
	return avocation.some((item) => item.id === id)
}
// 下拉获取爱好
let handlerScroll = () => {
	centerStore.getAvocation(centerStore.avocations.number + 1)
}
</script>

<style scoped>
.addHobby {
	padding: 0px 0 20px 0;
}
.item_box {
	position: relative;
	min-width: 100px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 4px;
	border: 1px solid #eaecf0;
	color: #111;
	background-color: #fff;
	cursor: pointer;
	margin: 0 22px 0px 0;
	display: inline-block;
	font-size: 12px;
	box-sizing: border-box;
	margin-top: 20px;
}
.item_icon {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -12px;
	right: -5px;
	background: #fff;
	z-index: 99999;
}
.item_box {
	position: relative;
	min-width: 100px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 4px;
	border: 1px solid #eaecf0;
	color: #111;
	background-color: #fff;
	cursor: pointer;
	margin: 0 22px 0px 0;
	display: inline-block;
	font-size: 12px;
	box-sizing: border-box;
	margin-top: 20px;
}
.item_icon {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -12px;
	right: -5px;
	background: #fff;
	z-index: 99999;
}
.confirm {
	width: 130px;
	height: 40px;
	padding-left: 0px;
	padding-right: 0px;
	padding: 10px 50px;
	font-size: 12px;
	border-radius: 3px;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #f93684;
	border-color: #dcdfe6;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	user-select: none;
	color: #fff;
	background-color: #f93684;
	margin-left: 10px;
}

.cancel {
	width: 130px;
	height: 40px;
	padding-left: 0px;
	padding-right: 0px;
	padding: 10px 50px;
	font-size: 12px;
	border-radius: 3px;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-color: #dcdfe6;
	color: #606266;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	user-select: none;
	text-align: center;
}

.cancel:hover {
	color: #f93684;
	border-color: #fdc3da;
	background-color: #feebf3;
}

.confirm:hover {
	color: #fff;
	background-color: #fa5e9d;
	border-color: #f93684;
}
.dialog-footer {
	margin-right: 50px;
	margin-top: 50px;
	text-align: right;
}
</style>
